<template>
    <massif-layout leftWidth="350px">
        <template v-slot:left>
            <div class="massifIndex">
                <div class="tobBox">
                    <div class="inputbox" style="margin-right: 10px;">
                        <company-select v-model="searchInfo.companyId" :disabled="userStore.userInfo.roleId!=1" className="small-el-input__inner" popperClass="samll-el-select-dropdown__list" @change="reGetData"/>
                    </div>
                    <div class="inputbox">
                        <farm-select ref="farmRef" v-model="farmId" className="small-el-input__inner" popperClass="samll-el-select-dropdown__list" :optLists="tableData" @change="farmChange"/>
                    </div>
                </div>
                <div class="tipsBox">
                    <div class="title">农事记录<span>{{total}}</span></div>
                    <div class="datebox">
                        <el-date-picker class="my-small-date" v-model="time" type="datetimerange" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" value-format="YYYY-MM-DD HH:mm:ss" @change="get_farm_record_list"/>
                    </div>
                </div>
                <div class="listBox">
                    <ul class="rdList" v-if="records && records.length>0">
                        <li v-for="(dt, index) in records" :key="dt.stageTaskMineId" @click="lookDetail(dt)" :class="{'selected':listItem.stageTaskMineId == dt.stageTaskMineId}">
                            <div class="tBox">
                                <p>{{dt.operationTime}}</p>
                                <p>作业事项: {{dt.taskName}}</p>
                                <p>作业地块: 
                                    <template v-for="(dt2,num) in (dt.farmLandRsps || [])">
                                        {{ dt2.farmLandName }}
                                        <template v-if="num<dt.farmLandRsps.length-1">、</template>
                                    </template>
                                </p>
                            </div>
                            <div class="imgBox" :style="`background-image: url(${dt.pictures?JSON.parse(dt.pictures)[0].url:'./src/assets/default.png'});`"></div>
                        </li>
                    </ul>
                    <div v-else style="text-align: center;padding: 20px 0;color: #999;">暂无数据</div>
                </div>
                <div class="bottom-page">
                    <my-pagination @goPage="toPage" :total="total" :page="page" :finish="(page*limit)>=total" :limit="limit"/>
                </div>
            </div>
        </template>
        <tencent-map ref="mapRef" :center="{'lat':34.35,'lng':100.33}" :zoom="4.5"/>
        <map-mode-control v-if="mapRef" :mapObj="mapRef"/>
        <right-float-block v-if="rightBlockFlag" title="详情" @close="rightBlockFlag=false">
            <div class="detailBox">
                <div class="txt">{{details.operationTime}}</div>
                <div class="flexTxt">
                    <div class="lt">作业事项：{{details.taskName}}</div>
                    <p>{{details.farmTianqi}}</p>
                </div>
                <div class="txt">作业记录:</div>
                <div class="taskContent" v-if="details.voiceDesc">
                    <template v-for="dt in JSON.parse(details.voiceDesc)">
                        <audio controls style="width: 100%;">
                            <source :src="`${dt.url}`" type="audio/mpeg">
                            您的浏览器不支持 audio 元素。
                        </audio>
                    </template>
                </div>
                <div class="taskContent" v-html="details.description" style="white-space:pre-line;"></div>
                <div class="taskContent" v-html="details.taskContent" style="white-space:pre-line;"></div>
                <div class="taskContent" v-if="details.pictures">
                    <img v-for="dt in JSON.parse(details.pictures)" :src="`${dt.url}`" :alt="dt.url" :key="dt.url">
                </div>
                <div class="txt">记录人：{{details.createName}}</div>
                <div class="txt">作业地块 :
                    <template v-for="(dt2,num) in (listItem.farmLandRsps || [])">
                        {{ dt2.farmLandName }}
                        <template v-if="num<listItem.farmLandRsps.length-1">、</template>
                    </template>
                </div>
                <div class="txt">作业位置: {{details.operationAddress}}</div>
            </div>
        </right-float-block>
    </massif-layout>
  </template>
  
  <script setup>
  // 这里的name是为了做页面缓存，其值要跟路由里面的name值一样
  
  import { nextTick, ref, watch, onActivated,reactive,onMounted} from 'vue'
  import{useRouter} from "vue-router"

  import {message} from '@/utils/element'
  import massifLayout from '@/view/massif/components/layout.vue'
  import myPagination from '@/components/custom/myPagination.vue'
  import tencentMap from '@/components/custom/tencentMap.vue'
  import companySelect from '@/components/custom/companySelect.vue'
  import farmSelect from '@/components/custom/farmSelect.vue'
  import rightFloatBlock from './components/rightFloatBlock.vue'
  import mapModeControl from '@/components/custom/mapModeControl.vue'
  import {getFarmList,getFarmRecordList,getRecordDetail,getFarmList2 } from '@/api/plant'

  import { useUserStore } from '@/pinia/modules/user'

  const router = useRouter()
  const userStore = useUserStore()
  
  const rightBlockFlag = ref(false)
  const mapRef = ref(null)
  const searchInfo = ref({})
  const page = ref(1)
  const limit = ref(10)
  const total = ref(0)
  const tableData = ref([])
  const farmId = ref(null) // 选择的农场id
  const farmRef = ref(null)
  const records = ref('')
  const time = ref('')
  const details = ref({})
  const listItem = ref({})
  
  // 腾讯地图信息框点击后处理函数
  window.mapCallback = function (id){
    farmId.value = JSON.parse(id)
    page.value = 1
    get_farm_record_list()
    set_map_marker()
  }

  onMounted(async ()=>{
    // if(userStore.userInfo.roleId!=1){ // 不是平台管理员
        searchInfo.value.companyId = userStore.userInfo.companyId
    //} 
    get_farm_list()
    await nextTick()
 
  })
  
  // 获取农场列表
  const get_farm_list = async ()=>{
    const res = await getFarmList2({
        page:page.value,
        limit:limit.value,
        isEnable:true,
        ...searchInfo.value
    })
    tableData.value = res.data
   // total.value = res.total
    set_map_marker()
    
   

    get_farm_record_list()
  }

  // 农事记录列表
  const get_farm_record_list = async ()=>{
    if(time.value){
        searchInfo.value.createTimeStart = time.value[0]
        searchInfo.value.createTimeEnd = time.value[1]
    }else{
        delete searchInfo.value.createTimeStart
        delete searchInfo.value.createTimeEnd
    }
    const res = await getFarmRecordList({
        page:page.value,
        limit:limit.value,
        farmId:farmId.value || null,
        type:2,
        ...searchInfo.value,
        
    })
    records.value = res.data
    total.value = res.total
  }

  // 设置地图标注
  const set_map_marker = ()=>{
    mapRef.value.clearAllMarker() // 清除所有的标记
    tableData.value.forEach(item =>{
        let className = 'mapMarker'
        if(item.farmId == farmId.value){
            className = 'mapMarker2'
        }
        mapRef.value.setMarker(item.locationLatitude,item.locationLongitude,item.farmName,`${item.farmAreaTotal}亩`,className,(e)=>{
            //location.href = `#/full/massif/farm?id=${e.id}`
            console.log(e.id)
            window.mapCallback(e.id)
        },item.farmId)
    })
  }

  // 公司选择变化事件
  const reGetData = ()=>{
    get_farm_list()
    farmId.value = ''
    //farmRef.value.getTableData({...searchInfo.value})
  }

  // 农场选择变化事件
  const farmChange = (item)=>{
    get_farm_record_list()
    set_map_marker()
    if(item.locationLatitude){
        mapRef.value.setCenter(item.locationLatitude,item.locationLongitude)
    }
  }


  const toPage = (pageNum)=>{
    page.value = pageNum
    get_farm_record_list()
  }

  const lookDetail = async (item)=>{
    listItem.value = item

    farmId.value = item.farmId
    set_map_marker()
    mapRef.value.setCenter(item.locationLatitude,item.locationLongitude)
    mapRef.value.setZoom(14)

    const res = await getRecordDetail(item.stageTaskMineId)
    if(res.code ==0 || res.success){
        if(res.data){
            rightBlockFlag.value = true
            details.value = res.data
        }else{
            message('没有获取到相关数据',3)
        }
    }else{
        message(res.message || '获取数据错误',3)
    }
  }
  </script>
  
  <style lang="scss" scoped>
    .massifIndex{
        box-sizing: border-box;
        display: flex;
        flex-flow: column;
        height: 100%;
        padding: 10px 0;
        overflow: hidden;
        .tobBox,.tipsBox{
            font-size: 12px;
            box-sizing: border-box;
            display: flex;
            align-items: center;
            height: 30px;
            padding: 0 10px;
            flex-shrink: 0;
            .inputbox{
                flex: 1;
            }
        }
        .tipsBox{
            margin: 7px 0;
            line-height: normal;
            .title{
                flex: 1;
                font-size: 12px;
                font-weight: bold;
                flex-shrink: 0;
                &::before{
                    content: '';
                    float: left;
                    width: 2px;
                    height: 13px;
                    background: #48b27a;
                    margin: 2px 5px 0 0;
                }
                span{
                    font-weight: normal;
                    color: #48b27a;
                    padding: 0 0 0 10px;
                }
            }
            .datebox{
                width: 220px;
                flex-shrink: 0;
                overflow: hidden;
            }
        }
        .listBox{
            box-sizing: border-box;
            //flex: 1;
            height: calc(100vh - 205px);
            flex-shrink: 0;
            width: 100%;
            padding: 0 10px;
            overflow: hidden;
            overflow-y: auto;
        }
        .bottom-page{
            box-sizing: border-box;
            flex-shrink: 0;
            height: 30px;
            padding: 0 15px;
        }
    }
    .rdList{
        list-style: none;
        padding: 0;
        margin: 0;
        font-family: Arial, Helvetica, sans-serif;
        li{
            display: flex;
            box-sizing: border-box;
            min-height: 80px;
            line-height: 20px;
            padding: 8px;
            background-color: #f8f7f7;
            cursor: pointer;
            &.selected{
                background-color: rgb(72, 178, 122,0.2);
            }
            &+li{
                margin-top: 10px;
            }
            .tBox{
                flex: 1;
                p{
                    font-size: 12px;
                }
            }
            .imgBox{
                width: 64px;
                height: 64px;
               // background-color: #cdcdcd;
                background-size: cover;
                background-position: center center;
                background-image: url(../../assets/default.png);
            }
        }
    }
    .detailBox{
        padding: 10px 0 0 0;
        line-height: 24px;
        .txt{
            padding: 0;
            margin: 0;
            font-size: 12px; 
        }
        .flexTxt{
            display: flex;
            font-size: 12px;
            align-items: center;
            .lt{
                flex: 1;
            }
        }
        p{
            font-size: 12px; 
        }
        .color1{
            color: #48b27a;
        }
        img{
            display: block;
            width: 100%;
            margin: 5px 0;
        }
        .taskContent{
            font-size: 12px; 
            line-height: 24px;
            img{
                display: block;
                width: 100%;
            }
        }
    }
  </style>
  <style lang="scss">
  .datebox{
    .el-date-editor{
        width: 100%;
    }
  }
  </style>
  